<!-- 自适应分框容器 -->

<template>
  <div style="overflow:hidden;position:relative;box-sizing:border-box;">
    <table :style="Tt" border="0" cellpadding="0" cellspacing="0">
      <!-- 上下模式 -->
      <tr v-if="Tr=='T'||Tr=='B'" :style="St" :height="Tr=='T'?1:undefined">
        <div style="width:100%;" :style="`${St}${Tr=='T'?'':'height:100%;'}`">
          <div
            style="height:100%;width:100%;"
            :style="Tr=='T'?'':'position:absolute;overflow-y:auto;'"
          >
            <slot :name="Tr=='T'?'auto':'max'" />
          </div>
        </div>
      </tr>
      <tr v-if="Tr=='T'||Tr=='B'" :style="St" :height="Tr=='B'?1:undefined">
        <div style="width:100%;" :style="`${St}${Tr=='B'?'':'height:100%;'}`">
          <div
            style="height:100%;width:100%;"
            :style="Tr=='B'?'':'position:absolute;overflow-y:auto;'"
          >
            <slot :name="Tr=='B'?'auto':'max'" />
          </div>
        </div>
      </tr>

      <!-- 左右模式 -->
      <tr v-if="Tr=='L'||Tr=='R'" :style="St">
        <td style="height:100%;" :style="St" :width="Tr=='L'?1:undefined">
          <div style="height:100%;position:relative;overflow-y:auto;">
            <slot :name="Tr=='L'?'auto':'max'" />
          </div>
        </td>
        <td style="height:100%;" :style="St" :width="Tr=='R'?1:undefined">
          <div style="height:100%;position:relative;overflow-y:auto;">
            <slot :name="Tr=='R'?'auto':'max'" />
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "kk-pair",

  // 接收参数
  props: {
    top: null,
    bottom: null,
    left: null,
    right: null
  },

  // 页面对象
  data: () => ({
    Tr: null, // 方向预设
    St: "position:relative;padding:0vw;margin:0vw;", // 通用行内样式
    Tt: "height:100%;width:100%;table-layout:automatic;"
  }),

  // 生命周期函数：挂载前调用
  created() {
    if (this.top != undefined) {
      this.Tr = "T";
    } else if (this.bottom != undefined) {
      this.Tr = "B";
    } else if (this.left != undefined) {
      this.Tr = "L";
    } else if (this.right != undefined) {
      this.Tr = "R";
    } else {
      this.Tr = "T";
    }
  }
};
</script>